<template>
  <div class="page">
    <sub-header title="会员登录"></sub-header>
    <div class='main login-main'>
      <div class='code-wrap' style="margin-top:0px"><input type="text" placeholder="手机号" v-model="cellphone"/></div>
      <div class='password-wrap'>
        <div class='password'><input :type="isOpen?'text':'password'" placeholder="密码" v-model="password"/></div>
        <div class='switch-wrap'>
          <van-switch v-model="isOpen" active-color="#EB1625"/>
        </div>
      </div>
      <div class='sure-btn' @click="doLogin()">登录</div>
      <div class="fastreg-wrap">
        <div><img src="../../../assets/images/home/index/forget.png" alt="忘记密码"/> 忘记密码</div>
        <div @click="$router.push({name: 'reg'})"><img src="../../../assets/images/home/index/reg.png" alt="忘记密码"/> 快速注册
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SubHeader from 'components/SubHeader'
import { mapActions } from 'vuex'

export default {
  name: 'login',
  data () {
    return {
      isOpen: false,
      cellphone: '',
      password: '',
    }
  },
  methods: {
    ...mapActions({
      login: 'user/login'
    }),
    doLogin () {
      if (this.cellphone.match(/^\s*$/)) {
        this.$toast('请输入手机号码登录')
        return
      }
      if (!this.cellphone.match(/^1\d{10}$/)) {
        this.$toast('你输入的手机号码不正确')
        return
      }
      if (this.password.match(/^\s*$/)) {
        this.$toast('请输入密码')
        return
      }
      this.login({
        cellphone: this.cellphone,
        password: this.password,
        success: (res) => {
          if (res.code === 200) {
            if (this.$route.query.from === 'reg') {
              this.$router.go(-3)
            } else {
              this.$router.go(-1)
            }
          } else {
            this.$toast(res.data)
          }
        }
      })
    }
  },
  computed: {},
  created () {
    document.title = this.$route.meta.title
  },
  components: {
    SubHeader
  }

}
</script>
<style scoped>
  .page {
    width: 100%;
    height: 100vh;
    background-color: #ffffff;
  }

  .main {
    width: 100%;
    padding-top: 1.4rem;
  }

  .cellphone-wrap {
    width: 90%;
    height: 0.84rem;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
  }

  .cellphone-wrap .cellphone {
    width: 62%;
    height: 100%;
    border: #EFEFEF solid 1px;
    border-radius: 2px;
  }

  .cellphone-wrap .cellphone input, .code-wrap input, .password-wrap .password input {
    width: 92%;
    height: 95%;
    font-size: 0.28rem;
    padding-left: 0.2rem;
  }

  .cellphone-wrap .code-btn {
    width: 35%;
    height: 0.82rem;
    background: #EAEAEA;
    color: #717376;
    border: #EAEAEA solid 1px;
    border-radius: 2px;
    font-size: 0.28rem;
    text-align: center;
    line-height: 0.82rem;
  }

  .cellphone-wrap .code-btn.success {
    background: #FFFFFF;
    border: 1px solid #EB1625;
    color: #EB1625
  }

  .code-wrap {
    width: 90%;
    height: 0.84rem;
    margin: 0 auto;
    border-radius: 2px;
    border: #EFEFEF solid 1px;
    margin-top: 0.4rem;
  }

  .password-wrap {
    width: 90%;
    height: 0.84rem;
    margin: 0 auto;
    border-radius: 2px;
    border: #EFEFEF solid 1px;
    margin-top: 0.4rem;
    display: flex;
    display: -webkit-flex;
  }

  .password-wrap .password {
    width: 80%;
    height: 100%;
  }

  .password-wrap .switch-wrap {
    width: 20%;
    margin-top: 0.1rem;
  }

  .sure-btn {
    width: 85%;
    height: 0.8rem;
    margin: 0 auto;
    background: #EB1625;
    font-size: 0.36rem;
    color: #FFFFFF;
    line-height: 0.8rem;
    text-align: center;
    margin-top: 0.4rem;
    border-radius: 4px;
  }

  .fastreg-wrap {
    width: 85%;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
    font-size: 0.24rem;
    margin: 0 auto;
    margin-top: 0.3rem;
  }

  .fastreg-wrap img {
    width: 0.32rem;
    height: 0.32rem;
    vertical-align: middle;
  }
</style>
